<template>
    <!-- Emmet -->
    <div class="todo-item">
        <div :style="{color: myStyle.color}">
       id: {{ evalItem.id }}
        </div>
        <div>
       text: {{ evalItem.text }}
        </div>
         <div :style="{color: color}">
       status: {{ statusZH  }}
        </div>
        <div>
            <button type="button" @click="emitFinish">处理</button>
        </div>
    </div>
</template>

<script lang="ts">
import Vue from 'vue';
import Component from 'vue-class-component';
import { Emit, Prop, Watch } from 'vue-property-decorator';
import { ITodoItem } from '@/typings/todo';

import { TodoItemEnum } from '@/enum/todo';
import { IEnum } from '@/typings';

@Component
export default class TodoItem extends Vue {
    @Prop({
      required: false,
      default: () => ({
        id: -1,
        text: '',
        status: 'Wait',
      }),
    })
    private item!: ITodoItem

    @Prop({ required: true })
    private styleInfo!: any

    @Watch('styleInfo', { immediate: true, deep: true })
    styleInfoChange(newVal: any, oldVal: any):void {
      const { color } = newVal;
      this.myStyle.color = color;
      console.log(newVal, oldVal);
    }

    @Emit('finish')
    emitFinish(): string {
      console.log(this);
      return this.evalItem?.id as string;
    }

    myStyle: any = {
      color: 'black',
    }

    get evalItem() {
      return this.item;
    }

    get evalStyle() {
      return this.styleInfo;
    }

    get statusZH() {
      const { status } = this.item;
      const enumItem = TodoItemEnum[status] as IEnum;
      return enumItem.description;
    }

    get color() {
      let color = '#000';
      const { status } = this.item;

      switch (status) {
        case TodoItemEnum.Wait.code:
          break;
        case TodoItemEnum.Finish.code:
          color = '#ff0000';
          break;
        default:
          break;
      }
      return color;
    }
}
</script>

<style lang="less" scoped>
.todo-item {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border: 1px solid #ccc;
    box-sizing: border-box;
    div {
        margin-left: 20px;
    }
}
</style>
